import { useAppDispatch, useAppSelector } from '@/store/hook'
import { getArticlesAction } from '@/store/reducers/article'
import ArticleItem from '../ArticleItem'
import { useEffect } from 'react'
import styles from './index.module.scss'
import { PullToRefresh } from 'antd-mobile'
export declare type TacticleList = {
  channelId: number
}
const ArticleList = ({ channelId }: TacticleList) => {
  const dispatch = useAppDispatch()
  useEffect(() => {
    dispatch(getArticlesAction(channelId))
  }, [dispatch, channelId])
  const channelAticles = useAppSelector(state => state.articler.channelAticles)
  const onRefresh = async () => {
    await dispatch(getArticlesAction(channelId))
  }
  return (
    <PullToRefresh onRefresh={onRefresh}>
      <div className={styles.root}>
        {/* 文章列表中的每一项 */}
        <div className='article-item'>
          {channelAticles[channelId]?.articles?.map(v => {
            return (
              <ArticleItem article={v} type={v.cover.type} key={v.art_id} />
            )
          })}
        </div>
      </div>
    </PullToRefresh>
  )
}

export default ArticleList
